<template>
<v-container app>
  <v-container>
      <v-row>
        <v-col cols="12" sm="3" md="2">
          <v-text-field v-model="username" label="名称" :clearable=true></v-text-field>
        </v-col>
        <v-col cols="12" sm="3" md="2">
          <v-text-field v-model="loginname" label="登录名称" :clearable=true></v-text-field>
        </v-col>
        <v-col cols="12" sm="3" md="2">
          <v-btn class="mb-2" color="primary" @click="queryUserList">查询</v-btn>
        </v-col>
      </v-row>
  </v-container>
  <v-data-table
    :headers="headers"
    :items="userList"
    item-key="name"
    sort-by="userid"
    class="elevation-1"
    show-select
    :fixed-header=true
    height="400px"
    :loading="loading"
    loading-text="数据加载中..."
    selectable-key="userid"
  >
    <template v-slot:top>
      <v-toolbar flat color="blue">
        <v-layout row wrap>
        <v-toolbar-items>
          <v-btn
              text
              large
              @click="addItem"
            >新增</v-btn>
        </v-toolbar-items>
        </v-layout>
      </v-toolbar>
    </template>
    <template v-slot:[`item.op`]="{ item }">
      <v-icon
        small
        class="mr-2"
        @click="editItem(item)"
      >
        mdi-pencil
      </v-icon>
      <v-icon
        small
        @click="deleteItem(item)"
      >
        mdi-delete
      </v-icon>
    </template>
    <template v-slot:no-data>
      <v-btn color="primary" @click="initialize">Reset</v-btn>
    </template>
  </v-data-table>

  <myAlert :dialog="dialog" :msg="msg" @setParam="setParam"></myAlert>
</v-container>
</template>

<script>
import myAlert from '@/components/common/myAlert'

export default {
  data: () => ({
    headers: [
      {
        text: '姓名',
        align: 'start',
        sortable: false,
        value: 'username'
      },
      { text: '登录名', value: 'loginname' },
      { text: '创建时间', value: 'createtime' },
      { text: '修改时间', value: 'updatetime' },
      { text: '操作', value: 'op', align: 'center' }
    ],
    userList: [],
    username: '',
    loginname: '',
    loading: false,
    dialog: false,
    msg: ''
  }),
  components: {
    myAlert
  },
  created () {
    this.initialize()
  },
  methods: {
    initialize () {
      this.userList = []
      this.loading = true
      this.axios.post('userRest/queryUserList', 'page=1&rows=20').then(response => {
        this.userList = response.data.rows
        this.loading = false
      })
    },
    queryUserList: function () {
      this.userList = []
      this.loading = true
      this.axios.post('userRest/queryUserList', 'page=1&rows=20&username=' + this.username + '&loginname=' + this.loginname).then(response => {
        this.userList = response.data.rows
        this.loading = false
      })
    },
    addItem () {
      this.$router.push({ path: '/user/addUser' })
    },
    editItem (item) {
      // this.$router.push({ path: '/user/modUser', params: { userid: item.userid } })
      this.$router.push({ path: '/user/modUser', query: { userid: item.userid } })
    },
    deleteItem (item) {
      this.axios.post('user/delUser', 'userid=' + item.userid).then(response => {
        if (response.data.nResult === '0') {
          this.queryUserList()
        } else {
          this.dialog = true
          this.msg = response.data.msg
        }
      })
    },
    setParam: function (dialog) {
      this.dialog = dialog
    }
  }
}

</script>
